<!-- 项目主页面导航 -->
<script lang="ts" setup>
import { icons } from '@/components/icon'

interface menuItem {
  id: number
  label: string
  icon: string
  path: string
}

// 数据
const menus: menuItem[] = [
  { id: 1001, label: '工作台', icon: 'desk_svg', path: '/' },
  { id: 1002, label: '系统管理', icon: 'sytem_svg', path: '/system/admin' },
  {
    id: 1003,
    label: '软著中台',
    icon: 'software_svg',
    path: '/module/ellweb01',
  },
  { id: 1004, label: '专利中台', icon: 'patent_svg', path: '' },
  { id: 1005, label: '数据字典', icon: 'data_dictionary_svg', path: '' },
]

const NavItems = menus.map(item => ({
  id: item.id,
  label: item.label,
  icon: icons[item.icon] || null,
  path: item.path,
}))

const selectedLabel = ref(1001)
const router = useRouter()
const route = useRoute()
const message = useMessage()
const notification = useNotification()

// 标志位，防止重复触发点击事件
let isHandlingClick = false

// 点击事件
const handleClick = (item: menuItem) => {
  if (isHandlingClick)
    return // 如果正在处理点击事件，则退出
  isHandlingClick = true // 设置标志位，防止重复触发

  // 如果路径为空，则显示提示信息
  if (!item.path) {
    message.error('路径为空，无法跳转！')
    // 延时重置标志位，确保可以触发下一次点击
    setTimeout(() => {
      isHandlingClick = false
    }, 100)
    return
  }

  selectedLabel.value = item.id

  // 检查路径是否存在
  const routeCheck = router.resolve(item.path)
  if (!routeCheck || routeCheck.name === undefined) {
    notification.error({
      title: '路径不存在',
      content: '目标路径不存在，无法跳转！',
    })
    // 延时重置标志位
    setTimeout(() => {
      isHandlingClick = false
    }, 100)
    return
  }

  const currentPathPrefix = route.path.split('/')[1] // 当前主路由前缀
  const targetPathPrefix = item.path.split('/')[1] // 目标主路由前缀

  if (currentPathPrefix === targetPathPrefix) {
    // 如果目标路径属于当前主系统，直接跳转
    router.push(item.path)
  }
  else {
    // 否则在新标签页中打开
    window.open(item.path, '_blank')
  }

  // 确保点击事件结束后允许下一次触发
  setTimeout(() => {
    isHandlingClick = false
  }, 100)

  // router.push(item.path)
}
</script>

<template>
  <div class="h-nav">
    <!--    <div
          v-for="(item, index) in NavItems"
          :key="item.label"
          class="flex items-center flex-1 justify-center"
        > -->
    <template v-for="(item, index) in NavItems" :key="item.id">
      <!-- 渲染导航项 -->
      <NavItem
        :active="item.id === selectedLabel"
        :icon="item.icon"
        :label="item.label"
        :path="item.path"
        @click="handleClick(item)"
      />
      <!-- 如果不是最后一项，渲染竖线图片 -->
      <img
        v-if="index < NavItems.length - 1"
        alt="separator"
        class="mx-4 h-6 w-px"
        src="@/assets/img/home/h-line.png"
      >
    </template>
  </div>
</template>

<style lang="scss" scoped>
.h-nav {
  @apply ml-36 mr-36 w-[80%] bg-white h-[80px] top-[16.5rem] absolute shadow-2xl rounded-[6px] flex items-center px-6 justify-center gap-4;
}
</style>
